import react from 'react';
// 函数组件，暂时称为无状态组件
// 组件的名字首字母最好大写
// 展示组件的时候，首字母一点大写，不大写就会报错

let name:string = "李易峰"
let str:string = "床前明月光,疑是地上霜"
let num:number = 11

// react中的类型声明
// 1.创建节点的是react.ReactNode
// 1.组件的返回值是react.ReactElement

// 创建一个元素变量
let el:react.ReactNode = <h1>一个元素</h1>
console.log(el);
// react元素被创建出来时不允许被修改的
// el.type = 'h2'  
// 只能被重新定义
el = <h3>新元素</h3>
console.log(el);


const Child = ():react.ReactElement => {
    
    // 条件渲染显示
    if(num >10){
        return(
            <fieldset>
                <legend>child</legend>
                <h1>一个组件</h1>
                <h2>{name}</h2>
                {/* 三元表达式 */}
                <h2>{name === "李易峰" ? "监狱风云" : "鸡你太美"}</h2>
                {str.split("").reverse().join("")}
                <h2>{['岛田原始', '岛田半藏', '岛田轮胎']}</h2>
            </fieldset>
        )
    }else{
        return <h1>啥也不是</h1>
    }
}

export default Child